<template>
    <div id="visual">
        <div class="page">
            <!-- 头部 -->
            <topComponent name="榆林市公共资源交易平台数字见证大厅" @click.native="$router.push({path:'/ksh'})"></topComponent>
            <div class="nav">
                <div style="display: flex;border-bottom: 2px solid #0538d0;width: 500px;">
                    <div class="nav-button" v-for="(item,index) in ['历史项目','历史人员']" :class="{'active':activeTab=== index}" @click=" handleActiveTab(index) " :key="index">
                        {{ item }}
                    </div>
            
                </div>
                <div v-if="activeTab === 0">
                    <el-form  size="mini"  class="custom-form" inline>
                        <el-form-item label="项目类型">
                            <el-select v-model="queryParams.projectType" placeholder="请选择"  
                            @change="getProjectRrjList()" clearable>
                                <el-option label="全部" value=""></el-option>
                                <el-option
                                    v-for="(key,value,index) in typeJSGC"
                                    :key="index"
                                    :label="key"
                                    :value="value"
                                />
                                </el-select>
                        </el-form-item>
                        <el-form-item label="日期">
                            <el-date-picker
                                v-model="queryParams.time"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                range-separator="至"
                                 :picker-options="pickerOptions"
                                @change="handTimeChange"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                                </el-date-picker>
                        </el-form-item>
                        <el-form-item label="">
                            <el-input v-model="queryParams.search" placeholder="请输入项目名称" clearable>
                                <el-button type="primary" slot="append" @click="getList()" icon="el-icon-search"></el-button>
                            </el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div v-else>
                    <el-form  size="mini"  class="custom-form" inline>
                        <el-form-item label="楼层">
                            <el-select v-model="queryParams.floorName" placeholder="请选择"  
                            @change="getList()" clearable>
                                <el-option
                                    v-for="(key,value,index) in ['十楼','十二楼']"
                                    :key="index"
                                    :label="index"
                                    :value="key"
                                />
                                </el-select>
                        </el-form-item>
                        <el-form-item label="日期">
                            <el-date-picker
                                v-model="queryParams.time"
                                type="daterange"
                                range-separator="至"
                                 :picker-options="pickerOptions"
                                @change="handTimeChange"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                                </el-date-picker>
                        </el-form-item>
                        <el-form-item label="">
                            <el-input v-model="queryParams.search" placeholder="请输入人员名称" clearable>
                                <el-button type="primary" slot="append" @click="getList()" icon="el-icon-search"></el-button>
                            </el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <!--  -->
            <div class="main">
            
                  <!-- 历史项目 -->
                    <el-table  v-if="activeTab === 0" class="custom-table"  style="height:100%;" :data="tableData"  border  :cell-style="{ color: '#fff' }"
                    :header-cell-style="{ color: '#fff' }"> 
                    <el-table-column type="index" label="序号" width="60"  :index="indexFn" ></el-table-column>
                    <el-table-column prop="projectName" label="项目名称"></el-table-column>
                    <el-table-column prop="bidName" label="标段名称"></el-table-column>
                    <el-table-column label="项目类型" >
                        <template slot-scope="scope">
                            <span>{{ scope.row.projectType | setJYLX }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="项目日期"></el-table-column>
                    <el-table-column prop="pbStartTime" label="评标时间"></el-table-column>
                    <el-table-column prop="bidOrg" label="招标单位"></el-table-column>
                    <el-table-column  label="操作详情"  fixed="right" width="200">
                        <template slot-scope="scope">
                            <div style="display: flex;justify-content: space-around;">
                                <el-tooltip  class="item" effect="dark" content="播放视频"  placement="bottom">
                                  <w-icon iconClass="a-mti-videoCamera" @click="handleTools(1,scope.row)"/>
                                </el-tooltip>
                                <el-tooltip class="item" effect="dark" content="查看轨迹" placement="bottom">
                                    <w-icon  iconClass="rstj"   @click="handleTools(2,scope.row)"/>
                                </el-tooltip>
                                <el-tooltip class="item" effect="dark" content="查看预警" placement="bottom">
                                    <w-icon  iconClass="gaojing"   @click="handleTools(3,scope.row)"/>
                                </el-tooltip>
                            </div>
                        </template>
                    </el-table-column>
                   </el-table>
                   <!-- 历史人员 -->
                   <el-table v-if="activeTab === 1" class="custom-table"  style="height:100%;"  :data="tableData"  border  :cell-style="{ color: '#fff' }"
                    :header-cell-style="{ color: '#fff' }"> 
                    <el-table-column type="index" label="序号" width="60" />
                    <el-table-column prop="personName" label="人员姓名"/>
                    <el-table-column prop="personSex" label="性别" />
                    <el-table-column prop="IdNo" label="身份证号"/>
                    <el-table-column prop="cardBindTime" label="进场时间"/>
                    <el-table-column prop="cardUnBindTime" label="离场时间"/>
                    <el-table-column  label="操作详情"  fixed="right" width="200">
                        <template slot-scope="scope">
                            <el-tooltip class="item" effect="dark" content="查看轨迹" placement="bottom">
                                    <w-icon  iconClass="rstj"   @click="handleTools(4,scope.row)"/>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                   </el-table>
                <pagination
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.currentPage"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
                />
            </div>
        </div>
    </div>
</template>

<script>
const typeJSGC = {
    'JSGC':'建设工程',
    'ZFCG':'政府采购'
}
 import topComponent from "@/components/top"
 import { pageProjectBid,listPersonByTrack } from "@/api/pageViewBig"
 import { Loading} from 'element-gui'
export default {
   
    // typeRYLB (){
    //   return   {
    //             'ZJ': "专家",
    //             'JD': "甲代",
    //             'ZBR': "招标人",
    //         }
    // },
    filters:{
        setJYLX(val){
            let str = ''
            if(val){
               str =  typeJSGC[val]
            }
            return str
        }
    },
    components:{
        topComponent
    },
    data(){
        return {
         
            tableData: [],
            typeJSGC,
            pickerOptions: {
                
                disabledDate: time => {
                // 选取前三个月数据
                let threeDate = new Date(); 
                threeDate.setMonth(threeDate.getMonth() - 3)
                return time.getTime()<threeDate.getTime() || time.getTime()> new Date().getTime()
                }

            },
            activeTab: 0,
            total:0,
            queryParams: {
                startTime:'',
                endTime:'',
               
                type: 'PB',
                search: '',
                time:[],
                currentPage:1,
                pageSize:10,
                floorName:'十楼'
            },

        }
    },
    mounted() {
        const yesterday = new Date()
              yesterday.setDate(yesterday.getDate() - 1);
        const endTime = yesterday.toISOString().split('T')[0];
        // this.queryParams.time = [endTime,endTime]
        this.queryParams.time = ['2024-08-01','2024-12-30']
        this.getList()
    },
   
    methods: {
        handleActiveTab(index){
            this.activeTab = index
            this.getList()
        },
        async getList() {
            let r;
          const  loadingInstance = Loading.service({
                lock: true,
                text: "正在加载中，请稍候...",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
                })
                this.tableData = []
         if( this.queryParams.time.length > 0 ){
            this.queryParams.startTime = this.queryParams.time[0] + ' 00:00:00'
            this.queryParams.endTime = this.queryParams.time[1]+ ' 23:59:59'
            this.queryParams.start = this.queryParams.time[0] + ' 00:00:00'
             this.queryParams.end = this.queryParams.time[1]+ ' 23:59:59'
         }


         if(this.activeTab === 0 ){
           r = await pageProjectBid(this.queryParams)
           if(r.code !==0 ) return 
           this.tableData = r.data.data
            this.total = r.data.pageBean.count;
         }

         if(this.activeTab === 1){
           r =  await listPersonByTrack(this.queryParams)
           if(r.code !==0 ) return 
           this.tableData = r.data
           this.total = 0
         
         }
         loadingInstance.close();
        },
        indexFn(index) {
         return index + 1 + (this.queryParams.currentPage - 1) * this.queryParams.pageSize;
        },   
        getProjectRrjList(){
            this.getList()
        },
        handleTools(type,row){
            let { bidId,projectId,projectName,bidName,pbFloorName,pbStartTime,pbEndTime} = row
            const  {floorName} =  this.queryParams
            console.log('row',row);
            switch (type) {
                case 1:
                    this.$router.push({path:'/dp1',query:row})
                    break;
                case 2:
                    this.$router.push({path:'/pageTrack',query:{projectId,bidId,projectName,bidName,floorName:pbFloorName,pbStartTime,pbEndTime}})
                    break;
                case 3:
                    this.$router.push({path:'/pageTrack',query:{projectId,bidId,projectName,bidName,floorName:pbFloorName,pbStartTime,pbEndTime}})
                    break;
                case 4:
                    this.$router.push({path:'/pageTrack',query:{...row,floorName}})
                    break;
                    
            }

        },
        handTimeChange(){
            if( this.queryParams.time.length > 0 ){
                this.queryParams.startTime = this.queryParams.time[0] + ' 00:00:00'
                this.queryParams.endTime = this.queryParams.time[1]+ ' 23:59:59'
            }
            this.getList()
        }
    }
}
</script>

<style scoped lang="scss">
#visual {
    width: 100%;
   height:100vh;
   background: url("../../../../assets/bg.jpg");
   overflow: hidden;
   background-size: 100% 100%;
    ul,
    li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .nav {
        padding-top: 10px;
        color: #fff;
        padding-left: 20px;
        cursor: default;

        &-button {
            letter-spacing: 0.1em;
            padding: 4px 6px;
            border: 1px solid #0538d0;
            margin-right: 10px;
            font-size: 14px;

            &:hover {
                background: #4170fa;
                border-bottom: 1px solid #fff;
            }

            &.active {
                background: #4170fa;
                border-bottom: 1px solid #fff;
            }
        }
    }

    .main {
        height: calc(100vh - 250px);
        position: relative;
        padding:0px 20px  ;
        background-color: rgba(14, 50, 159, 0.5);
    }
    

 }

 .text-container {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.text-weight {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

//  图标样式
.iconfontSvg {
    width: 28px;
    height: 28px;
    fill: #fff;
    margin-left: 10px;
}

.iconfontSvg.active {
    fill: #0984ff !important;
}

.font14 {
    font-size: 14px;
}

.font20 {
    font-size: 24px;
}
.iconSize{
    font-size: 20px;
}

::v-deep .play-container {
    .play-content {
        width: 1000px;
    }
}
::v-deep .custom-table{
        //  background-color: transparent !important;
         border: 1px solid #409eff; 
         background-color: #0a1238b5;

    .el-table__expanded-cell {
         background-color: transparent !important;
    }
    th,tr,td{
        background-color: transparent !important;
        padding: 4px;
    }
    .el-table__header{
        background-color:#2f53e0 ;
    }
    .el-table__header th,.el-table__body td{
        border: 1px solid #409eff; 
    }
    .el-table__row {
     border-bottom: 1px solid #409eff; /* 修改行之间的边框颜色 */
    }
    .el-table__empty-text{
        color: #fff;
    }
}
::v-deep .el-pagination{
    margin-top: 10px;
    text-align: right;
    color: #fff;
    background: transparent;
    .el-pagination__total{
        color: #fff;
    }
    .el-pagination__jump{
        color: #fff;
    }
    button{
        border: 1px solid #409eff;
        background-color: transparent !important;
        color: #fff;
       i{
         color: #fff;
       }
    }
    .el-input__inner{
        background: transparent;
        border: 1px solid #409eff;
        color: #fff;
    }
    .el-pager{
        li{
            background-color: transparent;
            border: 1px solid #409eff;
            color: #fff;
        }
    }
}
::v-deep .custom-form{
    text-align: right;
    padding-right: 20px;
    .el-form-item__label{
        color: #fff;
    }
}

</style>